<script setup lang="ts">
import ThreeDiv from "@/Components/ThreeDiv.vue";
import ThreeButton from "@/Components/ThreeButton.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "@/Components/SongBottom.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import SongList from "@/Components/SongList.vue";
import {ref} from "vue";

let songCount = ref(0);

const pageName = "MyLovePage"
function getLoveSongNum(loveSongNum){
  songCount.value = loveSongNum
}
</script>

<template>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list class="h-full w-55"></left-list>
    <div class="main grow h-183 flex flex-col overflow-auto pb-15 mx-3 ml-60">
      <undo-redo-search class="w-full ml--5"></undo-redo-search>
      <div class="mt-25 h-auto flex-col ml-3 ">
        <div class="flex-col h-auto gap-y-4 text-xl">
          <div class="text-10 text-gray-7 font-bold mb-5">我喜欢 （{{songCount}}）</div>
          <div class="grow ">
            <song-list class="px-5 ml-2" :pageName="pageName" @love-song-num="getLoveSongNum" :key="new Date().getTime()"
            ></song-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
</style>